<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="视频ID" width="100" />
      <el-table-column prop="userName" label="发布者" width="180" />
      <el-table-column prop="pic" label="发布者头像" width="180">
        <template #default="scope">
          <img style="width: 30px" :src="scope.row.userPic" />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="duration" label="视频时长" width="120" />
      <el-table-column prop="title" label="操作" width="200">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="getDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <app-pagination
      v-model:page="listParams.page"
      v-model:limit="listParams.limit"
      :list-count="listCount"
      :load-list="loadList"
      :disabled="listLoading" />
  </div>

  <!-- 详情页面 -->
  <Detail v-model="detailShow" :videoDetail="videoDetail" @success="handleClose" />
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getVideoList } from '@/api/test'
import Detail from './detail.vue'

let tableData = ref([])
let listParams = reactive({
  page: 1,
  size: 10
})
let listCount = ref(0)
let listLoading = ref(false)
const loadList = async () => {
  listLoading.value = true
  const data = await getVideoList(listParams)
  listLoading.value = false
  listCount.value = data.total
  tableData.value = data.list
}

onMounted(() => {
  loadList()
})

// ----------信息详情页面-----------
let detailShow = ref(false)
let videoDetail = ref({})
const getDetail = (item) => {
  detailShow.value = true
  videoDetail.value = item
}

const handleClose = () => {
  detailShow.value = false
}
</script>

<style lang="scss"></style>
